/**
 * 健康数据分析图表
 * @author truexin
 * @date   16/08/18
 */
import {health} from "../const/health";
import PullRefresh from '../components/mui/PullRefresh.js';

(function (lf, r) {
    
    let ajax = lf.utils.ajax,
        fmt = 'M/dd',
        getUrlParam = lf.utils.getUrlParam,
        formatTime = lf.utils.format;
    
    let type = getUrlParam('type'),
        userId = getUrlParam('userId');
    
    let Body = r.createClass({
        componentDidMount() {
            r.findDOMNode(this.refs.toDetail) && r.findDOMNode(this.refs.toDetail).addEventListener('touchend', function () {
                lf.appJs.doAction('finger-love-care.html?userId=' + userId, '亲情关怀');
            })
        },
        componentDidUpdate(){
            r.findDOMNode(this.refs.toDetail) && r.findDOMNode(this.refs.toDetail).addEventListener('touchend', function () {
                lf.appJs.doAction('finger-love-care.html?userId=' + userId, '亲情关怀');
            })
        },
        render() {
            let name = this.props.name,
                user = this.props.user;
            return (
                <div className="body">
                    <div className="mui-table-view-cell flex title">
                        <p className="flex-item text-dot">{name}</p>
                        <p className="flex-item">{'最近' + this.props.length + '次测量记录'}</p>
                        <p className="flex-item" ref={name && name != user.name ? "toDetail" : ''}>
                            {
                                name && name != user.name ?
                                    <span>亲情关怀
                                        < i className="mui-icon mui-icon-arrowright"></i>
                                    </span> : null
                            }
                        </p>

                    </div>
                    <div id="main"></div>
                </div>
            );
        }
    });
    
    let Root = r.createClass({
        getInitialState: function () {
            return {
                timeList: [], //时间(最近8天)
                temperature: [], //体温
                weight: [], //体重
                diastolicPress: [], //舒张压
                systolicPress: [], //收缩压
                fatPercent: [], //脂肪率
                waterPercent: [], //水分率
                name: '',
                maxStandard: '',
                minStandard: '',
                len: '',
            }
        },
        drawMap(data) {
            var myChart = echarts.init(document.getElementById('main'));
            let option = data;
            myChart.setOption(option);
        },
        //获取Name
        getName(){
            let me = this;
            ajax({
                type: "post",
                data: {
                    userId: userId
                },
            }, health.api.queryInfo, (data) => {
                me.setState({
                    name: data.nickName
                })
            });
        },
        getWeightValue() { //maskArea出不来,所以要拆分一个方法;
            let me = this;
            if (type == health.type.weight) {
                ajax({
                        type: 'get',
                        url: health.api.prefix + health.api.standard,
                        data: {
                            userId: userId,
                            type: type //检测类型。1：血压，3：体温，4：脂肪，6：体重
                        }
                    }, null, data => {
                        me.setState({
                            maxStandard: data.maxStandard,
                            minStandard: data.minStandard
                        })
                        me.renderMapData(data.maxStandard, data.minStandard);
                    }
                )
            } else {
                me.renderMapData();
            }
        },
        renderMapData(maxStandard, minStandard) {
            let me = this;
            ajax({
                type: 'get',
                url: health.api.prefix + health.api.queryLatestData,
                data: {
                    userId: userId,
                    type: type //检测类型。1：血压，3：体温，4：脂肪，6：体重
                }
            }, null, data => {
                
                let timeList = [], //时间(最近8天)
                    temperature = [], //体温
                    weight = [], //体重
                    diastolicPress = [], //舒张压
                    systolicPress = [], //收缩压
                    fatPercent = [], //脂肪率
                    waterPercent = []; //水分率
                
                $.each(data, function (i) {
                    timeList.push(formatTime(this.detectTime, fmt));
                    temperature.push(this.temperature);
                    weight.push(this.weight);
                    diastolicPress.push(this.diastolicPress);
                    systolicPress.push(this.systolicPress);
                    fatPercent.push(this.fatPercent);
                    waterPercent.push(this.waterPercent);
                })
                me.setState({
                    timeList: timeList.reverse(), //时间(最近8天)
                    temperature: temperature.reverse(), //体温
                    weight: weight.reverse(), //体重
                    diastolicPress: diastolicPress.reverse(), //舒张压
                    systolicPress: systolicPress.reverse(), //收缩压
                    fatPercent: fatPercent.reverse(), //脂肪率
                    waterPercent: waterPercent.reverse(), //水分率
                    len: data.length, //用于显示最近多少次
                })
                
                if (type == health.type.temperature) {
                    let data = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/> {c}°C"
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            axisTick: {
                                show: false, //刻度显示与否
                            },
                            data: timeList
                        },
                        yAxis: [
                            {
                                name: '体温°C',
                                max: 42,
                                min: 35,
                                splitNumber: 5, //这三个要单独传值
                                type: 'value',
                                nameTextStyle: {
                                    color: '#000'
                                },
                                axisTick: {
                                    show: false, //刻度显示与否
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: 'rgba(240, 240, 240, .8)'
                                    }
                                },
                            },
                        ],
                        series: [
                            {
                                name: '体温',
                                type: 'line',
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                },
                                symbolSize: 7,
                                data: temperature,
                                itemStyle: {
                                    normal: {color: '#03b1be'}
                                },
                                markArea: {
                                    silent: true,
                                    data: [[{
                                        yAxis: '36'
                                    }, {
                                        yAxis: '37.2'
                                    }]]
                                },
                                itemStyle: {
                                    normal: {color: '#03b1be'}
                                },
                            },
                        ]
                    };
                    me.drawMap(data);
                }
                if (type == health.type.blood) {
                    let data = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/> {c}mmHg"
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            axisTick: {
                                show: false, //刻度显示与否
                            },
                            data: timeList
                        },
                        yAxis: [
                            {
                                name: '   血压值(mmHg)',
                                max: 200,
                                splitNumber: 6, //这三个要单独传值
                                type: 'value',
                                nameTextStyle: {
                                    color: '#000'
                                },
                                axisTick: {
                                    show: false, //刻度显示与否
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: 'rgba(240, 240, 240, .8)'
                                    }
                                },
                            },
                        ],
                        series: [
                            {
                                name: '收缩压',
                                type: 'line',
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                },
                                symbolSize: 7,
                                markArea: {
                                    silent: true,
                                    data: [[{
                                        yAxis: '90'
                                    }, {
                                        yAxis: '140'
                                    }]]
                                },
                                itemStyle: {
                                    normal: {color: '#03b1be'}
                                },
                                data: systolicPress,
                            },
                            {
                                name: '舒张压',
                                type: 'line',
                                symbolSize: 7,
                                markArea: {
                                    silent: true,
                                    data: [[{
                                        yAxis: '60'
                                    }, {
                                        yAxis: '90'
                                    }]]
                                },
                                lineStyle: {
                                    normal: {
                                        width: 3,
                                    }
                                },
                                data: diastolicPress,
                                itemStyle: {
                                    normal: {color: '#33cc99'}
                                },
                            }
                        ]
                    };
                    me.drawMap(data);
                }
                if (type == health.type.weight) {
                    let data = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/> {c}KG"
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            axisTick: {
                                show: false, //刻度显示与否
                            },
                            data: timeList
                        },
                        yAxis: [
                            {
                                name: '体重(KG)',
                                max: maxStandard + 5,
                                splitNumber: 5, //这三个要单独传值
                                nameTextStyle: {
                                    color: '#000'
                                },
                                axisTick: {
                                    show: false, //刻度显示与否
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: 'rgba(240, 240, 240, .8)'
                                    }
                                },
                            },
                        ],
                        series: [
                            {
                                name: '体重',
                                type: 'line',
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                },
                                symbolSize: 7,
                                markArea: {
                                    silent: true,
                                    data: [[{
                                        yAxis: minStandard
                                    }, {
                                        yAxis: maxStandard
                                    }]]
                                },
                                data: weight,
                                itemStyle: {
                                    normal: {color: '#03b1be'}
                                },
                                
                            },
                        ]
                    };
                    me.drawMap(data);
                }
                if (type == health.type.fat) {
                    let data = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/> {c}%"
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            axisTick: {
                                show: false, //刻度显示与否
                            },
                            data: timeList
                        },
                        yAxis: [
                            {
                                name: '   百分比(%)',
                                max: 60,
                                min: 16,
                                type: 'value',
                                nameTextStyle: {
                                    color: '#000'
                                },
                                axisTick: {
                                    show: false, //刻度显示与否
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: 'rgba(240, 240, 240, .8)'
                                    }
                                },
                            },
                        ],
                        series: [
                            {
                                name: '水分率',
                                type: 'line',
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                },
                                symbolSize: 7,
                                markArea: {
                                    silent: true,
                                    data: [[{
                                        yAxis: '49.5'
                                    }, {
                                        yAxis: '52.7'
                                    }]]
                                },
                                data: waterPercent,
                                itemStyle: {
                                    normal: {color: '#03b1be'}
                                },
                                
                            },
                            {
                                name: '脂肪率',
                                type: 'line',
                                symbolSize: 7,
                                markArea: {
                                    silent: true,
                                    data: [[{
                                        yAxis: '21.0'
                                    }, {
                                        yAxis: '34.0'
                                    }]]
                                },
                                lineStyle: {
                                    normal: {
                                        width: 3,
                                    }
                                },
                                data: fatPercent,
                                itemStyle: {
                                    normal: {color: '#33cc99'}
                                },
                            }
                        ]
                    };
                    me.drawMap(data);
                }
            });
        },
        componentWillMount() {
            let me = this;
            me.getName();
            me.getWeightValue();
        },
        render() {
            let me = this;
            let timeList = this.state.timeList,
                systolicPressList = this.state.systolicPress,
                diastolicPressList = this.state.diastolicPress,
                temperatureList = this.state.temperature,
                weightList = this.state.weight,
                fatPercentList = this.state.fatPercent,
                waterPercentList = this.state.waterPercent;

            let countList = [];

            for (let i = 0; i < timeList.length; i++) {
                countList.push(i + 1);
            }

            let list = countList.map(function (time) {
                return (
                    <p className="flex-item">{time}</p>
                )
            })
            
            let systolicPress = systolicPressList.map(function (press, i) {
                return (
                    <p className="flex-item">
                        <span className={press > 140 ? 'orange' : (press < 90 ? 'purple' : '')}>{press}
                        <i className={press > 140 ? 'mui-icon mui-icon-arrowthinup' :
                            (press < 90 ? 'mui-icon mui-icon-arrowthindown' : '')}></i>
                        </span>
                    </p>
                )
            })
            let diastolicPress = diastolicPressList.map(function (press) {
                return (
                    <p className="flex-item">
                        <span className={press > 90 ? 'orange' : (press < 60 ? 'purple' : '')}>{press}
                        <i className={press > 90 ? 'mui-icon mui-icon-arrowthinup' :
                            (press < 60 ? 'mui-icon mui-icon-arrowthindown' : '')}></i>
                        </span>
                    </p>
                )
            })
            let temperature = temperatureList.map(function (temp) {
                return (
                    <p className="flex-item">
                        <span className={temp > 37.2 ? 'orange' :
                            (temp < 36 ? 'purple' : '')}>{temp}
                        <i
                            className={temp > 37.2 ? 'mui-icon mui-icon-arrowthinup' :
                            (temp < 36 ? 'mui-icon mui-icon-arrowthindown' : '')}></i>
                            </span>
                    </p>
                )
            })
            let weight = weightList.map(function (temp) {
                return (
                    <p className="flex-item">
                        <span
                            className={temp > me.state.maxStandard ? 'orange' : (temp < me.state.minStandard ? 'purple' : '')}>{temp}
                        <i className={temp > me.state.maxStandard ? 'mui-icon mui-icon-arrowthinup' :
                        (temp < me.state.minStandard ? 'mui-icon mui-icon-arrowthindown' : '')}></i></span>
                    </p>
                )
            })
            let waterPercent = waterPercentList.map(function (temp) {
                return (
                    <p className="flex-item">
                        <span className={temp > 52.7 ? 'orange' : (temp < 47.9 ? 'purple' : '')}>
                            {temp}

                        <i className={temp > 52.7 ? 'mui-icon mui-icon-arrowthinup' :
                        (temp < 47.9 ? 'mui-icon mui-icon-arrowthindown' : '')}></i>
                            </span>
                    </p>
                )
            })
            let fatPercent = fatPercentList.map(function (temp) {
                return (
                    <p className="flex-item">
                        <span
                            className={temp > 34 ? 'orange' : (temp < 21 ? 'purple' : '')}>{temp}
                        <i className={temp > 34 ? 'mui-icon mui-icon-arrowthinup' :
                        (temp < 21 ? 'mui-icon mui-icon-arrowthindown' : '')}></i>
                            </span>
                    </p>
                )
            })
            
            let renderList = (function () {
                if (type == health.type.temperature) {
                    return (
                        <div>
                            <div className="flex-box-col">
                                <div className="flex">
                                    <span className="press inline-block"></span>
                                    <span>体温(正常值36~37.2)</span>
                                </div>
                            </div>
                            <div className="split-line"></div>
                            <div className="data-list">
                                <div className="mui-table-view-cell flex bgColor">
                                    <p className="flex-item">次数</p>
                                    {list}
                                </div>
                                
                                <div className="mui-table-view-cell flex">
                                    <p className="flex-item">体温</p>
                                    {temperature}
                                </div>
                            </div>
                        </div>
                    )
                }
                if (type == health.type.fat) {
                    return (
                        <div>
                            <div className="flex-box-col">
                                <div className="flex">
                                    <span className="press inline-block"></span>
                                    <span>水分率(正常值49.5~52.7)</span>
                                </div>
                                <div className="flex">
                                    <span className="relax inline-block"></span>
                                    <span>脂肪率(正常值21.0~34.0)</span>
                                </div>
                            </div>
                            <div className="split-line"></div>
                            <div className="data-list">
                                <div className="mui-table-view-cell flex bgColor">
                                    <p className="flex-item">次数</p>
                                    {list}
                                </div>
                                
                                <div className="mui-table-view-cell flex">
                                    <p className="flex-item">水分率</p>
                                    {waterPercent}
                                </div>
                                <div className="mui-table-view-cell flex">
                                    <p className="flex-item">脂肪率</p>
                                    {fatPercent}
                                </div>
                            </div>
                        </div>
                    
                    
                    )
                }
                if (type == health.type.weight) {
                    return (
                        <div>
                            <div className="flex-box-col">
                                <div className="flex">
                                    <span className="press inline-block"></span>
                                    <span>{'体重(正常值' + me.state.minStandard + '~' + me.state.maxStandard + ')'}</span>
                                </div>
                            </div>
                            <div className="split-line"></div>
                            <div className="data-list">
                                <div className="mui-table-view-cell flex bgColor">
                                    <p className="flex-item">次数</p>
                                    {list}
                                </div>
                                
                                <div className="mui-table-view-cell flex">
                                    <p className="flex-item">体重</p>
                                    {weight}
                                </div>
                            </div>
                        </div>
                    )
                }
                if (type == health.type.blood) {
                    return (
                        <div>
                            <div className="flex-box-col">
                                <div className="flex">
                                    <span className="press inline-block"></span>
                                    <span>收缩压(正常值90~140)</span>
                                </div>
                                <div className="flex">
                                    <span className="relax inline-block"></span>
                                    <span>舒张压(正常值 60~90 )</span>
                                </div>
                            </div>
                            <div className="split-line"></div>
                            <div className="data-list">
                                <div className="mui-table-view-cell flex bgColor">
                                    <p className="flex-item">次数</p>
                                    {list}
                                </div>
                                
                                <div className="mui-table-view-cell flex">
                                    <p className="flex-item">收缩压</p>
                                    {systolicPress}
                                </div>
                                <div className="mui-table-view-cell flex">
                                    <p className="flex-item">舒张压</p>
                                    {diastolicPress}
                                </div>
                            </div>
                        </div>
                    )
                }
            }())
            
            return <div className="data-analysis app-margin-bottom">
                <Body user={this.props.user} name={this.state.name} length={this.state.len}/>
                {renderList}
            </div>
        }
    });
    
    lf.appJs.getUser(function (user) {
        if (type == health.type.weight) {
            lf.appJs.setTitle('体重');
        }
        if (type == health.type.fat) {
            lf.appJs.setTitle('脂肪');
        }
        if (type == health.type.temperature) {
            lf.appJs.setTitle('体温');
        }
        if (type == health.type.blood) {
            lf.appJs.setTitle('血压');
        }
        r.render(
            <PullRefresh data={ <Root user={user}/>}/>,
            document.getElementById('root'), function () {
                // $('#root').css({backgroundColor: '#fff'});
            }
        )
    });
})(liefeng, React)
